<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#2f54eb!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
        #mess{
            height: 205px;
            overflow: scroll;
        }

        #mess-box{
            display: none;
        }

        #coach-box{
            display: none;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>用户统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 id="userNum" class="no-margins"></h1>
                                                        <small>当前注册用户记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>课程统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 id="courseNum" class="no-margins"></h1>
                                                        <small>当前在线课程记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>文章统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 id="articleNum" class="no-margins"></h1>
                                                        <small>当前发布文章记录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>订单统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 id="orderNum" class="no-margins"></h1>
                                                        <small>当前订单录数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10 layuimini-qiuck">
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:" layuimini-content-href="manager/managerList" data-title="管理员列表" data-icon="fa fa-window-maximize">
                                                <i class="fa fa-user-plus"></i>
                                                <cite>管理员列表</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:" layuimini-content-href="user/userList" data-title="用户列表" data-icon="fa fa-gears">
                                                <i class="fa fa-user-md"></i>
                                                <cite>用户列表</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:" layuimini-content-href="course/courseList" data-title="课程列表" data-icon="fa fa-file-text">
                                                <i class="fa fa-calendar"></i>
                                                <cite>课程列表</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:" layuimini-content-href="article/articleAdmin" data-title="锦囊管理" data-icon="fa fa-dot-circle-o">
                                                <i class="fa fa-stack-overflow"></i>
                                                <cite>锦囊管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:" layuimini-content-href="department/departmentList" data-title="部门管理" data-icon="fa fa-calendar">
                                                <i class="fa fa-flickr"></i>
                                                <cite>部门管理</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:" layuimini-content-href="courseAudit" data-title="课程审核" data-icon="fa fa-hourglass-end">
                                                <i class="fa fa-sort-amount-asc"></i>
                                                <cite>课程审核</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:" layuimini-content-href="data/analysis" data-title="数据分析" data-icon="fa fa-search">
                                                <i class="fa fa-bar-chart"></i>
                                                <cite>数据分析</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:" layuimini-content-href="log/info" data-title="访问日志" data-icon="fa fa-snowflake-o">
                                                <i class="layui-icon layui-icon-log"></i>
                                                <cite>访问日志</cite>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card" id="mess-box">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
                    <div id="mess" class="layui-card-body layui-text"></div>
                </div>
                <div class="layui-card" id="coach-box">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-star icon icon-blue"></i>特训班管理</div>
                    <div id="coach" class="layui-card-body layui-text"></div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-paper-plane-o icon"></i>作者心语</div>
                    <div class="layui-card-body layui-text layadmin-text">
                        <p>花卷教育管理系统 | 随时随地，一站式管理</p>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-app icon layui-red"></i>版本信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>项目名称</td>
                                <td>
                                    breadroll-admin
                                </td>
                            </tr>
                            <tr>
                                <td>当前版本</td>
                                <td>v2.1.0</td>
                            </tr>
                            <tr>
                                <td>主要特色</td>
                                <td>简洁 / 响应式 / 极简</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['layer', 'miniTab','echarts'], function () {
        let $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;

        miniTab.listen();

        /**
         * 查看公告信息
         **/
        $('body').on('click', '.notice', function () {
            let title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();
            let html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                '<div style="font-size: 12px">' + content + '</div>\n<br>' +'<div  style="font-size: 12px">发布时间:'+noticeTime+'</div>'+
                '</div>';
            parent.layer.open({
                type: 1,
                title: '系统公告'+'<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px"></span>',
                area: '300px;',
                shade: 0.8,
                id: 'notice',
                btn: ['确认'],
                btnAlign: 'c',
                moveType: 1,
                content:html
            });
        });

        $(function (){
            $.ajax({
                url:"/page/home/data",
                type:"get",
                processData:false,
                contentType:false,
                success:function(res){
                    if(res.code===200){
                        let html='';
                        for(let i=0;i<res.data.total;i++){
                            html+="<div class='layuimini-notice notice'>" +
                                "<div class='layuimini-notice-title'>"+res.data.messageList[i].title+"</div>"+
                                "<div class='layuimini-notice-extra'>"+res.data.messageList[i].publishTime+"</div>"+
                                "<div class='layuimini-notice-content layui-hide'>"+res.data.messageList[i].content+"</div>"+
                                "</div>";
                        }
                        if(res.data.total!==0){
                            $('#mess').append(html);
                            $("#mess-box").css("display","block");
                        }
                        let coach = res.data.coachApplies;
                        let dom = '';
                        for(let i in coach){
                            if(coach.hasOwnProperty(i)){
                                console.log(i);
                                dom+="<div class='layuimini-notice'>" +
                                    "<div onclick='coachCourse("+coach[i].courseId+");' style='cursor: pointer;' class='layuimini-notice-title'>"+coach[i].courseName+"</div>"+
                                    "<div class='layuimini-notice-extra'>等待退课处理</div>"+
                                    "</div>";
                            }
                        }
                        if(coach.length!==0){
                            $('#coach').append(dom);
                            $("#coach-box").css("display","block");
                        }
                        $('#userNum').html(res.data.usersNum);
                        $('#courseNum').html(res.data.coursesNum);
                        $('#articleNum').html(res.data.articlesNum);
                        $('#orderNum').html(res.data.orderNum);
                        $.ajax({
                            url:"/page/home/table",
                            type:"get",
                            processData:false,
                            contentType:false,
                            success:function(res){
                                /**
                                 * 报表功能
                                 */
                                let list = res.data.list;
                                for(let i=list.length;i<5;i++){
                                    list.push({typeName:"无",countType:0});
                                }
                                let echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
                                let optionRecords = {
                                    title: {
                                        text: '专业课程情况',
                                        left: 'center'
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data:['课程数量'],
                                        right: 'right'
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    toolbox: {
                                        feature: {
                                            saveAsImage: {}
                                        }
                                    },
                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: [list[0].typeName,list[2].typeName,list[1].typeName,list[4].typeName,list[3].typeName]
                                    },
                                    yAxis: {
                                        type: 'value'
                                    },
                                    series: [
                                        {
                                            name:'课程数量',
                                            type:'line',
                                            data:[list[0].countType,list[2].countType,list[1].countType,list[4].countType,list[3].countType]
                                        }
                                    ]
                                };
                                echartsRecords.setOption(optionRecords);
                                // echarts 窗口缩放自适应
                                window.onresize = function(){
                                    echartsRecords.resize();
                                }

                            },
                            error:function (error) {//请求失败后调用的函数
                                layer.msg(error, {time: 5000, icon:2,offset: [15]});
                            },
                        })


                    }else{
                        layer.msg(res.message, {time: 5000, icon:2,offset: [15]});
                    }
                },
                error:function (error) {//请求失败后调用的函数
                    layer.msg(error, {time: 5000, icon:2,offset: [15]});
                },
            })

            layui.form.render(); //重新渲染显示效果
        })
    });
</script>
<script>
    function coachCourse (courseId){
        console.log("AAA");
        let index = layer.open({
            title: '报名信息',
            type: 2,
            shade: 0.2,
            maxmin:true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: '/special/apply/sendCourseId?cId='+courseId
        });
    }
</script>
</body>
</html>
